<template>
	<!-- 我的 -->
	<view class="profile-page">
		<custom-title-bar bgColor="transparent"> 我的 </custom-title-bar>

		<!-- 背景 -->
		<view class="bg">
			<image class="bg-img" src="/static/images/profile-bg.png" mode="aspectFill"></image>
		</view>

		<view class="content">
			<!-- 用户信息 -->
			<view class="user-info container m-auto">
				<!-- 头像 -->
				<view class="avatar" @click="toLoginPage">
					<image class="avatar-img" src="/static/images/avatar.jpg" mode="aspectFill" />
				</view>
				<!-- 用户昵称/手机号 -->
				<view class="username">
					<!-- 昵称 -->
					<view class="nickname truncate">
						<text>LanYun</text>
					</view>
					<!-- 手机号 -->
					<view class="phone truncate">
						<text>123****4567</text>
					</view>
				</view>
			</view>

			<!-- 会员卡信息 -->
			<view class="vip-card-info container m-auto">
				<!-- 会员等级 -->
				<view class="level">
					<view>
						<view class="level-name"> 会员卡·普通会员 </view>
						<view class="card-number">1093586832435</view>
					</view>
					<view class="qr-code">
						<image class="qr-code-icon" src="/static/svg-icon/qr-code-white.svg" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 余额 -->
				<view class="balance">
					<view class="type">
						<view class="num">5</view>
						<view class="name">优惠卷</view>
					</view>
					<view class="type" @click="toRechargePage">
						<view class="num">168.30</view>
						<view class="name">余额</view>
					</view>
					<view class="type">
						<view class="num">324</view>
						<view class="name">积分</view>
					</view>
				</view>
			</view>

			<!-- 我的功能 -->
			<view class="my-funtion container m-auto">
				<view class="title">我的功能</view>
				<view class="list">
					<view class="item">
						<view class="icon">
							<image class="icon-svg" src="/static/svg-icon/yhj.svg" mode="aspectFill" />
						</view>
						<view class="text">兑换优惠</view>
					</view>
					<view class="item">
						<view class="icon">
							<image class="icon-svg" src="/static/svg-icon/phone.svg" mode="aspectFill" />
						</view>
						<view class="text">更换手机</view>
					</view>
					<view class="item">
						<view class="icon">
							<image class="icon-svg" src="/static/svg-icon/address.svg" mode="aspectFill" />
						</view>
						<view class="text">地址管理</view>
					</view>
					<view class="item">
						<view class="icon">
							<image class="icon-svg" src="/static/svg-icon/ticket.svg" mode="aspectFill" />
						</view>
						<view class="text">开发票</view>
					</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="icon">
							<image class="icon-svg" src="/static/svg-icon/comment.svg" mode="aspectFill" />
						</view>
						<view class="text">联系客服</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义 tabBar -->
		<custom-tabbar />
	</view>
</template>

<script setup>
	// 前往会员充值
	const toRechargePage = () => {
		uni.navigateTo({
			url: '/pages/recharge/recharge'
		})
	}

	// 前往登录
	const toLoginPage = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style lang="scss" scoped>
	// 背景
	.bg {
		top: 0;
		z-index: 0;
		width: 100%;
		height: 616rpx;
		position: fixed;

		.bg-img {
			width: 100%;
			height: 100%;
		}
	}

	// 用户信息
	.content {
		z-index: 10;
		position: relative;

		// 用户信息
		.user-info {
			display: flex;
			height: 136rpx;
			margin-top: 60rpx;

			// 头像
			.avatar {
				width: 136rpx;
				height: 136rpx;
				overflow: hidden;
				border-radius: 50%;
				border: 4rpx solid #fff;

				.avatar-img {
					width: 100%;
					height: 100%;
				}
			}

			// 用户昵称 / 手机号
			.username {
				height: 100%;
				width: 380rpx;
				display: flex;
				margin-left: 24rpx;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				// 昵称
				.nickname {
					width: inherit;
					color: #2d4d40;
					font-size: 36rpx;
					font-weight: bold;
				}

				// 手机号
				.phone {
					width: inherit;
					color: #668072;
					font-size: 26rpx;
					margin-top: 12rpx;
				}
			}
		}

		// 会员卡信息
		.vip-card-info {
			height: 300rpx;
			overflow: hidden;
			margin-top: 60rpx;
			border-radius: 20rpx;
			background-size: 100% 100%;
			background: url('/static/images/vip-card-bg.png') no-repeat center;

			// 会员等级
			.level {
				display: flex;
				height: 80rpx;
				padding: 0 36rpx;
				margin-top: 36rpx;
				align-items: center;
				justify-content: space-between;

				.level-name {
					color: white;
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 3rpx;
				}

				.card-number {
					color: #bfdae0;
					font-size: 26rpx;
					margin-top: 12rpx;
				}

				.qr-code {
					width: 60rpx;
					height: 60rpx;

					.qr-code-icon {
						width: 100%;
						height: 100%;
					}
				}
			}

			// 余额
			.balance {
				width: 100%;
				display: flex;
				margin-top: 50rpx;
				align-items: center;
				justify-content: space-around;

				.type {
					flex: 1;
					text-align: center;

					.num {
						color: #fff;
						font-size: 32rpx;
						font-weight: bold;
					}

					.name {
						color: #bfdae0;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	// 我的功能
	.my-funtion {
		margin-top: 70rpx;

		.title {
			color: #3b3b3b;
			font-size: 30rpx;
			font-weight: 600;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 60rpx;

			&:first-child {
				margin: 0;
			}

			.item {
				display: flex;
				width: 167.5rpx;
				align-items: center;
				flex-direction: column;
				justify-content: space-around;

				.icon {
					.icon-svg {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.text {
					color: #3b3b3b;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>